<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Fx/Fx.Slide</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx-Slide">Fx.Slide</a></h4>
      <div class="menu-item"><a href="#Fx-Slide:slideIn">slideIn</a></div>
      <div class="menu-item"><a href="#Fx-Slide:slideOut">slideOut</a></div>
      <div class="menu-item"><a href="#Fx-Slide:toggle">toggle</a></div>
      <div class="menu-item"><a href="#Fx-Slide:hide">hide</a></div>
      <div class="menu-item"><a href="#Fx-Slide:show">show</a></div>
      <h4 class="menu-item"><a href="#Element-Properties">Element.Properties</a></h4>
      <div class="menu-item"><a href="#Element-Properties:slide">slide</a></div>
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
      <div class="menu-item"><a href="#Element:slide">slide</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Fx-Slide"><a href="#Fx-Slide">Class: Fx.Slide</a></h1>
      <p class="description">The slide effect slides an Element in horizontally or vertically.  The contents will fold inside.</p>
      <h3>Note</h3>
      <ul>
        <li>Fx.Slide requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
      </ul>
      <h3>Extends</h3>
      <ul>
        <li><a href="../../../docs/core/Fx/Fx.html">Fx</a></li>
      </ul>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span>element<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>elements - (<em>element</em>) The element to slide.</li>
        <li>options  - (<em>object</em>, optional) All of <a href="../../../docs/core/Fx/Fx.html">Fx</a> options in addition to mode and wrapper.</li>
      </ol>
      <h4>Options</h4>
      <ul>
        <li>mode    - (<em>string</em>; defaults to 'vertical') String to indicate what type of sliding. Can be set to 'vertical' or 'horizontal'.</li>
        <li>wrapper - (<em>element</em>; defaults to this.element) Allows to set another Element as wrapper.</li>
        <li>hideOverflow - (<em>boolean</em>; defaults to <em>true</em>) automatically sets the overflow of the wrapper to overflow, otherwise it inherits from the element being wrapped.</li>
        <li>resetHeight - (<em>boolean</em>; defaults to <em>false</em>) Automatically resets the height of the wrapper when the slide unfold animation is completed, allowying to manipulate the content keeping it adjusting naturally.</li>
      </ul>
      <h4>Properties</h4>
      <ol>
        <li>open    - (<em>boolean</em>) Indicates whether the slide element is visible.</li>
      </ol>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Hides the Element, then brings it back in with toggle and finally alerts</span>
<span class="co1">//when complete:</span>
<span class="kw2">var</span> mySlide = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'container'</span><span class="br0">)</span>.<span class="me1">hide</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">toggle</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw3">alert</span><span class="br0">(</span>mySlide.<span class="kw3">open</span><span class="br0">)</span>; <span class="co1">//Alerts true.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>Notes</h3>
      <ul>
        <li>To create the slide effect an additional Element (a "div" by default) is wrapped around the given Element. This wrapper adapts the margin from the Element. It's overflow is set to hidden and it has a fixed height.</li>
      </ul>
      <h2 id="Fx-Slide:slideIn"><a href="#Fx-Slide:slideIn">Fx.Slide Method: slideIn</a></h2>
      <p class="description">Slides the Element in view horizontally or vertically.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">slideIn</span><span class="br0">(</span><span class="br0">[</span>mode<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>mode - (<em>string</em>, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Slide instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">slideOut</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">show</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">slideIn</span><span class="br0">(</span><span class="st0">'horizontal'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Slide:slideOut"><a href="#Fx-Slide:slideOut">Fx.Slide Method: slideOut</a></h2>
      <p class="description">Slides the Element out of view horizontally or vertically.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">slideOut</span><span class="br0">(</span><span class="br0">[</span>mode<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li> <em>mode</em> - (<em>string</em>, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Slide instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>

    mode: <span class="st0">'horizontal'</span>,
    <span class="co1">//Due to inheritance, all the [Fx][] options are available.</span>
    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Poof!'</span><span class="br0">)</span>;
    <span class="br0">}</span>

<span class="co1">//The mode argument provided to slideOut overrides the option set.</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">slideOut</span><span class="br0">(</span><span class="st0">'vertical'</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Slide:toggle"><a href="#Fx-Slide:toggle">Fx.Slide Method: toggle</a></h2>
      <p class="description">Slides the Element in or out, depending on its state.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toggle</span><span class="br0">(</span><span class="br0">[</span>mode<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>mode - (<em>string</em>, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Slide instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="nu0">1000</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Pow</span>.<span class="me1">easeOut</span>

<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//Toggles between slideIn and slideOut twice:</span>
myFx.<span class="me1">toggle</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span>myFx.<span class="me1">toggle</span><span class="br0">)</span>;

</pre>
      <h2 id="Fx-Slide:hide"><a href="#Fx-Slide:hide">Fx.Slide Method: hide</a></h2>
      <p class="description">Hides the Element without a transition.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">hide</span><span class="br0">(</span><span class="br0">[</span>mode<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>mode - (<em>string</em>, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Slide instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="st0">'long'</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Bounce</span>.<span class="me1">easeOut</span>

<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//Automatically hides and then slies in "myElement":</span>
myFx.<span class="me1">hide</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">slideIn</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Slide:show"><a href="#Fx-Slide:show">Fx.Slide Method: show</a></h2>
      <p class="description">Shows the Element without a transition.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">show</span><span class="br0">(</span><span class="br0">[</span>mode<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>mode - (<em>string</em>, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Slide instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Slide</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="nu0">1000</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Bounce</span>.<span class="me1">easeOut</span>

<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//Slides "myElement" out.</span>
myFx.<span class="me1">slideOut</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="co1">//Waits one second, then the Element appears without transition.</span>
    <span class="kw1">this</span>.<span class="me1">show</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">1000</span>, <span class="kw1">this</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h1 id="Element-Properties"><a href="#Element-Properties">Hash: Element.Properties</a></h1>
      <p class="description">See <a href="../../../docs/core/Element/Element.html#Element-Properties">Element.Properties</a>.</p>
      <h2 id="Element-Properties:slide"><a href="#Element-Properties:slide">Element Property: slide</a></h2>
      <p class="description">Sets a default Fx.Slide instance for an element.
        Gets the previously setted Fx.Slide instance or a new one with default options.</p>
      <h3>Syntax</h3>
      <pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'slide'</span><span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>options - (<em>object</em>) the Fx.Morph options.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) this element</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'slide'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">slide</span><span class="br0">(</span><span class="st0">'in'</span><span class="br0">)</span>;

</pre>
      <h3>Syntax</h3>
      <pre class="javascript">el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'slide'</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) the Fx.Slide instance</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'slide'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">slide</span><span class="br0">(</span><span class="st0">'in'</span><span class="br0">)</span>;

&nbsp;
el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'slide'</span><span class="br0">)</span>; <span class="co1">//the Fx.Slide instance</span>
</pre>
      <h1 id="Element"><a href="#Element">Type: Element</a></h1>
      <p class="description">Custom Type to allow all of its methods to be used with any DOM element via the dollar function <a href="../../../docs/core/Element/Element.html#Window:dollar">$</a>.</p>
      <h2 id="Element:slide"><a href="#Element:slide">Element Method: slide</a></h2>
      <p class="description">Slides this Element in view.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myElement.<span class="me1">slide</span><span class="br0">(</span>how<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>how     - (<em>string</em>, optional) Can be 'in', 'out', 'toggle', 'show' and 'hide'. Defaults to 'toggle'.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) this Element.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">slide</span><span class="br0">(</span><span class="st0">'hide'</span><span class="br0">)</span>.<span class="me1">slide</span><span class="br0">(</span><span class="st0">'in'</span><span class="br0">)</span>;

</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
